﻿@{Layout = null;}
@model MvcShopping.Models.MemberLoginViewModel
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Thirteen Shop</title>
    <script src="~/Scripts/jquery-3.2.1.js"></script>
    <script src="~/Scripts/jquery-ui-1.8.20.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #fff;
            color: #fff;
            font-family: Arial;
            font-size: 12px;
        }

        .body {
            position: absolute;
            top: -20px;
            left: -20px;
            right: -40px;
            bottom: -40px;
            width: auto;
            height: auto;
            background: url('../../images/city-wallpaper-18.jpg') no-repeat fixed;
            background-size: cover;
            background-position: 50%;
        }

        .grad {
            position: absolute;
            top: -20px;
            left: -20px;
            right: -40px;
            bottom: -40px;
            width: auto;
            height: auto;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
            z-index: 1;
            opacity: 0.7;
        }

        .header {
            position: absolute;
            top: calc(50% - 35px);
            left: calc(50% - 255px);
            z-index: 2;
        }

            .header div {
                float: left;
                color: #fff;
                font-family: 'Exo', sans-serif;
                font-size: 35px;
                font-weight: 200;
            }

                .header div span {
                    color: #5379fa !important;
                }

        .login {
            position: absolute;
            top: calc(50% - 100px);
            left: calc(50% - 130px);
            height: 200px;
            width: 260px;
            padding: 10px;
            z-index: 2;
        }

        .user {
            width: 250px;
            height: 30px;
            background: transparent;
            border: 1px solid rgba(255,255,255,0.6);
            border-radius: 2px;
            color: #fff;
            font-family: 'Exo', sans-serif;
            font-size: 16px;
            font-weight: 400;
            padding: 4px;
        }

        .paw {
            width: 250px;
            height: 30px;
            background: transparent;
            border: 1px solid rgba(255,255,255,0.6);
            border-radius: 2px;
            color: #fff;
            font-family: 'Exo', sans-serif;
            font-size: 16px;
            font-weight: 400;
            padding: 4px;
            margin-top: 10px;
        }

        #btn1 {
            position: center;
            width: 260px;
            height: 35px;
            background: #fff;
            border: 1px solid #fff;
            cursor: pointer;
            border-radius: 2px;
            color: darkgrey;
            font-family: 'Exo', sans-serif;
            font-size: 16px;
            font-weight: 400;
            padding: 6px;
            margin-top: 10px;
        }

            #btn1:hover {
                opacity: 0.8;
            }

            #btn1:active {
                opacity: 0.6;
            }

        .user:focus {
            outline: none;
            border: 1px solid rgba(255,255,255,0.9);
        }

        .paw:focus {
            outline: none;
            border: 1px solid rgba(255,255,255,0.9);
        }

        #btn1:focus {
            outline: none;
        }

        .my {
            position: center;
            width: 260px;
            height: 30px;
            border: 1px solid #fff;
            border-radius: 2px;
        }
    </style>

</head>
<body>
    <div class="body"></div>
    <div class="grad"></div>
    <br>
    <div class="login">
        @using (Html.BeginForm())
        {
            @Html.ValidationSummary(true)


            <div class="text-center" style="margin-bottom:10px;margin-top:10px">
                <label style="font-size:large;color:white">邮箱</label>
                <div>
                    @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "my" } })
                    @Html.ValidationMessageFor(model => model.Email)

                </div>
            </div>

                            <div class="text-center" style="margin-bottom:10px;margin-top:10px">
                                <label style="font-size:large;color:white;">密码</label>
                                <div>
                                    @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "my" } })
                                    @Html.ValidationMessageFor(model => model.Password)
                                </div>
                            </div>
                            <p>
                                <button type="submit" id="btn1">登录</button>
                                <h5><a style="color:white;font-size:large;float:right" href="findPassword">忘记密码？</a></h5>
                            </p>

        }



    </div>



    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }
</body>

</html>

